<template>
    <Product v-if="item" :item="item[0]"></Product>
    <div class="product-cart">
        <el-input-number v-model="num" :min="1" :max="999" />
        <button @click="addCart">加入购物车</button>
    </div>
</template>
<script setup>
import Product from '@/components/product.vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ref, onMounted } from 'vue'
// 引入弹出框
import { ElNotification } from 'element-plus'
const route = useRoute()
const item = ref(null)
// 购买数量
const num = ref(1)
// 获取商品数据
const getGoodsDetail = async () => {
    const res = await axios.get('/api/goods/' + route.query.id)
    item.value = res.data
    
}
// 添加购物车
const addCart = () => {
    console.log('加入购物车', item.value[0].id, item.value[0].title, item.value[0].nprice, num.value);
    axios.post('/api/goods/addCart', {
        productId: item.value[0].id,
        title: item.value[0].title,
        price: item.value[0].nprice,
        num: num.value
    }).then(res => {
        console.log(res.data.msg);
        console.log(res.data.code);
        alert(res.data.msg)
    })
}
onMounted(() => {
    getGoodsDetail()
})
</script>